<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Nas Password</title>
	<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
	<link rel="shortcut icon" href="./assets/img/375.png" type="image/x-icon">

	<link rel="stylesheet" href="assets/css/reset.css">
	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

	<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	<script src="https://cdn.bootcss.com/toastr.js/latest/toastr.min.js"></script>
	<link href="https://cdn.bootcss.com/toastr.js/latest/toastr.css" rel="stylesheet">
	<link rel="stylesheet" href="./lib//bootstrap-3.3.7-dist/css/bootstrap.min.css">
	<style>
		body,html{
			width: 100%;
			height: 100%;
		}
		body{
			background-image:url('http://bimgs.plmeizi.com/images/bing/2018/MorondavaBaobab_ZH-CN11131924506_1920x1080.jpg') ;
			background-repeat:no-repeat;
			background-size:100% 100%
		}
		.content{
			 width:70%;
			 margin: 0 auto;
			 background: white;
			 min-width: 640px;
			 position: relative;
		}
		.tips{
			 text-align: center;
			 line-height: 100px;
			 font-size:20px;
			 font-weight: 700;
		}
		.tips span{
			font-size:50px;
			color: #c00;
			font-style: italic;
			font-size: 3rem;
			font-weight: 700;
		}
	  .items-show{
			padding-bottom: 10px;
		}
		/* 表格样式 */
		 table.table2_1{
			width:90%;
			margin:15px auto;
			
		}
		.table2_1 th {
			background-color:#99979c;
			color:#FFFFFF;
			height: 40px;
			line-height: 40px;
			font-size: 1.5rem !important;
			font-style: italic;
			font-weight: 700;
		}
		.table2_1,.table2_1 th,.table2_1 td
		{
			font-size:0.95em;
			text-align:center;
			padding:4px;
			border:1px solid #99979c;

			border-collapse:collapse;
			height: 50px;
			line-height: 50px;
		}
		.table2_1 tr:nth-child(odd){
			background-color:#fdfdfd;
		}
		.table2_1 tr:nth-child(even){
			background-color:#fdfdfd;
		}
		.shows{
			 display: none;
		}
		/* 添加一条记录 */
		.g-tips{
				position: fixed;
				top:0;
				left:0;
				bottom: 0;
				right: 0;
				background-color: rgba(0, 0, 0, .5);
				display: none;
				z-index: 10;
		}
		.g-content{
			width: 500px;
			height: 350px;
			background-color: white;
			border-radius: 5px;
			-moz-box-shadow:0px 0px 20px #F2F2F2; 
			-webkit-box-shadow:0px 0px 20px #F2F2F2;
			box-shadow:0px 0px 20px #F2F2F2;
			position: absolute;
			top:50%;
			left:50%;
			margin-left: -250px;
			margin-top: -120px;
		}
		.g-oks{
				  padding: 0px 20px;
					height: 50px;
					line-height: 50px;
					background-color: green;
					color:white;
					position: absolute;
					top:50%;
					left: 50%;
					margin-top:50px;
					margin-left: -100px;
					border-radius: 5px;
					display: none;
					z-index: 10;
		}
		.site{
			text-align: center;
			padding:50px 0px;
		}
		.logo{
			margin-top: -20px;
			text-align: center;
			padding-bottom:30px;
		}
		.logo img{
			width: 150px;
		}
		@keyframes change
		{
			from {-webkit-transform:rotate(0deg);}
			 to {-webkit-transform:rotate(360deg);}
		}
		@-moz-keyframes change /* Firefox */
		{
			from {-webkit-transform:rotate(0deg);}
			 to {-webkit-transform:rotate(360deg);}
		}

		@-webkit-keyframes change /* Safari 和 Chrome */
		{
			from {-webkit-transform:rotate(0deg);}
			 to {-webkit-transform:rotate(360deg);}
		}

		@-o-keyframes change /* Opera */
		{
			from {-webkit-transform:rotate(0deg);}
			 to {-webkit-transform:rotate(360deg);}
		}
		/* 加载动画 */
		.wait{
			 position: fixed;
			 top:0;
			 left:0;
			 right: 0;
			 bottom: 0;
			 background-color: rgba(0, 0, 0, .8);
			 display: none;
		}
.spinner {
  margin: 300px auto 0;
  width: 50px;
  height: 60px;
  text-align: center;
  font-size: 10px;
}
 
.spinner > div {
  background-color: #67CF22;
  height: 100%;
  width: 6px;
  display: inline-block;
   
  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
  animation: stretchdelay 1.2s infinite ease-in-out;
}
 
.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
 
.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}
 
.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
 
.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
 
@-webkit-keyframes stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 
  20% { -webkit-transform: scaleY(1.0) }
}
 
@keyframes stretchdelay {
  0%, 40%, 100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% {
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }

}
.wait-tips{
		/* position: absolute; */
		margin: 5px auto;
		color:greenyellow;
		text-align: center;
}
		#top{
			background:#222;
			color:  #ffffff;
			margin-bottom: 0;
		}
	</style>
</head>
<body>
<header class="navbar navbar-static-top bs-docs-nav" id="top" >
	<div class="container">
		<div class="navbar-header" >
			<button class="navbar-toggle collapsed " type="button" data-toggle="collapse" data-target="#bs-navbar" aria-controls="bs-navbar" style="width: 30%;height: 30%" aria-expanded="false">
				<span class="glyphicon glyphicon-menu-hamburger" id="nav-button"></span>
			</button>
			<a href="#" class="navbar-brand"  style="color:#ffffff;">Nas PassWord</a>
		</div>
		<nav id="bs-navbar" class="navbar-collapse collapse navbar-inverse" aria-expanded="false" style="height: 1px;color: #FFFFFF">
			<ul class="nav navbar-nav my-nav">
				<li>
					<a href="javascript:;" style="color: #FFFFFF" onclick="$('#howModel').modal('show')" >How</a>
				</li>
				<li >
					<a href="javascript:;" onclick="$('#emailModel').modal('show')" style="color: #FFFFFF">Contact Us</a>
				</li>


			</ul>
			<ul class="nav navbar-nav navbar-right">
				<!-- <li><a href="http://mb.bootcss.com" onclick="_hmt.push(['_trackEvent', 'docv3-navbar', 'click', 'themes'])" target="_blank">主题/模板</a></li> -->
				<li><a href="https://chrome.google.com/webstore/detail/nasextwallet/gehjkhmhclgnkkhpfamakecfgakkfkco" style="color: #FFFFFF" >Nas Wallet-Extension</a></li>
			</ul>
		</nav>
	</div>
</header>

		<div class="content" style="margin-top: 5%;">
			
				<div class="tips" ><span style="color: #333333">Nas PassWord</span></div>
				<div class="logo">
						<img src="./assets/img/375.png" alt="">
				 </div>
				<div style="text-align: right; margin-right: 50px;"> 
						<button type="button" class="btn btn-success addItem" style="background-color: #337ab7;border:#2e6da4;">Add Item </button>
				</div>
				<!-- 表格展示 记录 -->
				<div class="items-show">
						<div class="shows" style="text-align: center;line-height: 50px;font-size:25px;color:red;">No Anything, Go to Add a Item!</div>
						<table class="table2_1">
							  <thead>
										<tr>
											<th>Alias</th><th>Website</th><th>Account</th><th>Password</th><th>Option</th>
										</tr>
									
								</thead>
								<tbody class="changeContent">
							  </tbody>
						</table>

				</div>
				<!--  添加一条记录 -->
				<div class="g-tips">
						<div class="g-content">
							  <form action="">
								<div style="line-height: 60px;text-align: center;font-size:25px;font-weight: 500;"> Add One Item</div>
								<div class="input-group" style="box-sizing: border-box;padding:10px 30px;">
										<span class="input-group-addon">Your Website Alias</span>
										<input type="text" class="form-control v1" placeholder="Alias" aria-describedby="basic-addon1">
								</div>
								<div class="input-group" style="box-sizing: border-box;padding:10px 30px;">
										<span class="input-group-addon">Your  &nbsp;&nbsp;&nbsp; Website</span>
										<input type="text" class="form-control v2" placeholder="Website" aria-describedby="basic-addon1">
								</div>
								<div class="input-group" style="box-sizing: border-box;padding:10px 30px;">
										<span class="input-group-addon">Your   AccountName</span>
										<input type="text" class="form-control v3" placeholder="AccountName" aria-describedby="basic-addon1">
								</div>
								<div class="input-group" style="box-sizing: border-box;padding:10px 30px;">
										<span class="input-group-addon">Your   &nbsp;&nbsp;&nbsp;Password</span>
										<input type="text" class="form-control v4" placeholder="Password" aria-describedby="basic-addon1">
								</div>
								<div style="text-align: center;padding-top:20px;">
										<button type="reset" class="btn btn-danger quxiao" style="width:100px;margin-right: 30px;">cancel</button>
										<button type="button" class="btn btn-success tijiao" style="width:100px;background-color: green;border: 0px;">submmit</button>
								</div>
							</form>
						</div>
				</div>
				<div class="g-oks">
						success register
				 </div>
				 <div class="site">
					 <div style="color:#333333;font-weight: 600;">password keeper by nas</div>
					 <div>
						<img src="" width="200px"></div>
				 </div>
		</div>
		<div class="wait">
			<div class="spinner">
				<div class="rect1"></div>
				<div class="rect2"></div>
				<div class="rect3"></div>
				<div class="rect4"></div>
				<div class="rect5"></div>
			</div>
			<div class="wait-tips">
				dealing...please wait
			</div>
		</div>
<!--email-->
<div class="modal fade" id="emailModel" tabindex="-1" role="dialog" aria-labelledby="email">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title">developer email</h4>
			</div>
			<div class="modal-body">
				<h4>wojshiain@126.com</h4>

			</div>

			<div >

				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">cancel</button>

				</div>
			</div>
		</div>
	</div>
</div>
<div class="modal fade" id="howModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="myModalLabel">About Nas Password</h4>
			</div>
			<div class="modal-body">
				<h4>hash address is identify!</h4>
				<p>In the blockchain, your wallet address uniquely represents your identity:-D</p>
				<p>The most important thing is Protecting your key file  ！</p>
				<HR align=center width=100% color= #a2a9b9 SIZE=10>

				<h4>Why manage your accounts by blockChain?</h4>

				<p>It's difficult for you to remember your thousands accounts </p>
				<p>It is not recommended that you set all your account passwords to the same character, because once a website is compromised by hackers, you can use it to break through your other websites.</p>
				<p>So you can manage your accounts by private key</p>
				<HR align=center width=100% color= #a2a9b9 SIZE=10>

				<h4>Nas PassWord</h4>
				<p>Nas PassWord is based on Nebulas,all your info is encrypted by blockChain</p>
				<p>We never store any of your info</p>


			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">cancel</button>
			</div>
		</div>
	</div>
</div>
		<!--<script src="https://cdn.bootcss.com/jquery/2.1.1-beta1/jquery.js"></script>-->
		<script src=lib/nebPay.js></script>
		<script src="lib/nebulas.js"></script>
	<script>
		 var NebPay = require("nebpay")
		 var nebPay = new NebPay();
		 var dappAddress = "n1tgVw38eKnBqMg4J1pfE8isz8PMSwnLMyW"
		 var Uaddress = sessionStorage.getItem("address")
		 var Upassword = sessionStorage.getItem("password")

		  var HttpRequest = require("nebulas").HttpRequest;
			var Neb = require("nebulas").Neb;
			var Account = require("nebulas").Account;
			var Transaction = require("nebulas").Transaction;
			var Unit = require("nebulas").Unit;
			var neb = new Neb();
			// neb.setRequest(new HttpRequest("https://testnet.nebulas.io"));
			neb.setRequest(new HttpRequest("https://mainnet.nebulas.io"));
			var account, tx, txhash, timer;

		 if(!(Uaddress && Upassword)){
		  	window.location.href = "./index.html"
			//  alert("请登录...")
		 }
         var callArgs = "[\"" + Uaddress +"\"]";
         // nebPay.simulateCall(dappAddress,"0","getAccount",callArgs,{
         // 	listener:login
         // })
         var value = "0";   // 金额
         var nonce = "0";   // 交易序号
         var gas_price = "1000000"; // 手续费价格
         var gas_limit = "2000000"; // 手续费限制
         var callFunction = "getAllAtPd";
         var contract = { // 合约
             "function": callFunction,  // 方法名
             "args": callArgs            // 参数
         }
         toastr.success('wait plz, querying from chain ...');
		 toastr.success('if no response, refresh again');
         // 使用api.call执行合约中的方法
         neb.api.call(Uaddress, dappAddress, value, nonce, gas_price, gas_limit, contract).then(function (res) {
             console.log(res)
             res = res.result
             if(res!=="\"null\""){
                 $(".shows").css("display","none")
                 //  $(".table2_1").css("display","block")
                 var result = JSON.parse(res)
                 result = JSON.parse(result)
                 console.log(result)
                 // 拿到了items 数组循环出字符串添加到结构
                 var str = changeContent(result)
                 $(".changeContent").html(str);
                 if(result.length===0){
                     toastr.warning("you have no accounts, go to add one?");
                 }
                 del()
             }else{

                 $(".shows").css("display","block")

             }
         }).catch(function (err) {
             console.log("error:" + err.message)
         })

		 // // 发送请求 看本账户有多少个记录并显示
		 //  var callArgs = "[\"" + Uaddress +"\"]";
	  	// nebPay.simulateCall(dappAddress,"0","getAllAtPd",callArgs,{
			// 	listener:getAllItems
		 //  })
			// function getAllItems(res) {
			// 	console.log(res)
			// 	res = res.result
			// 	if(res!=="\"null\""){
			// 		 $(".shows").css("display","none")
			// 		//  $(".table2_1").css("display","block")
			// 		 var result = JSON.parse(res)
			// 		 result = JSON.parse(result)
			// 		 console.log(result)
			// 		 // 拿到了items 数组循环出字符串添加到结构
			// 		 var str = changeContent(result)
			// 		 $(".changeContent").html(str);
			// 		 if(result.length===0){
			// 			  toastr.warning("您没有保存任何网站和密码，去添加一条");
			// 		 }
			// 		 del()
			// 	}else{
			//
			// 		$(".shows").css("display","block")
			//
			// 	}
			// }
			// 添加一条记录
			$(".addItem").click(function () {
				if(testWallte()){
					return
				}
				console.log(111)
				 $(".g-tips").fadeIn(500)
			})
			$(".quxiao").click(function(){
				$(".g-tips").fadeOut(500)
			})
			$(".tijiao").click(function(){
				 // 获取值
				 var alias = $(".v1")
				 var website = $(".v2")
				 var account = $(".v3")
				 var password = $(".v4")
				 // 
				 aliasV  = alias.val().trim()
				 websiteV = website.val().trim()
				 accountV = account.val().trim()
				 passwordV = password.val().trim()
				 var callArgs = "[\"" + aliasV + "\",\"" + websiteV +"\",\"" + accountV + "\",\"" + passwordV + "\",\"" + Uaddress +  "\"]";
				 if(aliasV&&websiteV&&accountV&&passwordV){
						alias.val("")
						website.val("")
						account.val("")
						password.val("")
						$(".g-tips").fadeOut(500)
						var serialNumber = nebPay.call(dappAddress,"0","addAtPd",callArgs,{
							listener:addItem
						})
				 }else{
					toastr.warning("add failed, try again")
				 }
			})
			// 删除一条记录
			del()
			function del(){
				if(testWallte()){
					return
				}
				var delBtn = $(".delItem")
				if(delBtn.length>0){
					delBtn.click(function(){
						var node = this.parentNode.parentNode
						var value = node.children[1].children[0].innerHTML;
						var callArgs = "[\"" + value + "\",\"" + Uaddress+"\"]"; 
						nebPay.call(dappAddress,"0","delAtPd",callArgs,{
							listener:delItem
						})
					})
				}
			}
			// ---------------------监听函数----------------------------------------------------
	    function  addItem(res){
					console.log("res"+res);
					var txhash = res.txhash;
					console.log(txhash)
					if(txhash){
						testTransitionStatus(txhash,function(){
							$(".wait").fadeOut(10)
                            toastr.success("add success")

                            setTimeout(function(){
								window.location.reload(true);
							},800)
							
						})
					}
			}
			function delItem(res) { 
				console.log(res);
				var txhash = res.txhash;
				console.log(txhash)
				if(txhash){
					testTransitionStatus(txhash,function(){
							$(".wait").fadeOut(10)
                        	toastr.success("del success")
							setTimeout(function(){
								window.location.reload(true);
							},800)
							
					})
				}
				
			}
	// ----------------------工具函数-----------------------------------------------------
			function testTransitionStatus(txhash,callback){
				timer = setInterval(function(){
					  $(".wait").fadeIn(500)
						neb.api.getTransactionReceipt({hash:txhash}).then(function (res) { 
								// console.log("================================")
								// console.log(res)
								// console.log("================================")
								if(res.status === 1){
									clearInterval(timer)
									if(callback){
										callback()
									}
									return 
								}
						})
				},2000)
			}
			function tips(text,background,time){
						  var html = $(".g-oks");
							html.html(text)
							background = background || "green"
							time = time || 1000
							html.css("backgroundColor",background)
							$(".g-oks").fadeIn(500);
							setTimeout(function(){
								$(".g-oks").fadeOut(1000)
							},time)
					 }
			function changeContent(result){
				var str = "";
					// `{websiteName: "百度", website: "www.baidu.com", accountName: "GaoChao", password: "aaa"}`;
					 for(var i =0;i<result.length;i++){
						 str+=`	<tr>
										<td>${result[i].websiteName}</td><td><a target="_blank" style="text-decoration: underline;font-style: italic;" href="${result[i].website}" class="a">${result[i].website}</a></td><td>${result[i].accountName}</td><td>${result[i].password}</td>
										<td>
												<button type="button" class="btn btn-danger delItem">Delete</button>
										</td>
									</tr>`
					 }
				return str;
			}
			function testWallte(){
				 if(typeof webExtensionWallet === undefined ||typeof webExtensionWallet === null){
					 alert("Install Chrome Nebulas-WebExtensionWallet ")
					 return true
				 }
				 return false;
			}
	</script>
</body>
</html>